import React, { Component } from "react";
import styles from './infin.module.css'
import axios from 'axios'
import {
  InfiniteLoader,
  WindowScroller,
  AutoSizer,
  List,
} from "react-virtualized";

export default class infin extends Component {
    state = {
        cityName: "",
        cityArea: "",
        activeIndex: -1,
        items: [],
        count:'',
        // 房屋列表数据
        list: []
      };
  isRowLoaded = ({ index }) => {
    return !!this.state.list[index];
  };
   // 用来获取更多房屋列表数据
  // 注意：该方法的返回值是一个 Promise 对象，并且，这个对象应该在数据加载完成时，来调用 resolve 让Promise对象的状态变为已完成。
  loadMoreRows = ({ startIndex, stopIndex }) => {
    return new Promise(resolve => {
        axios.get('http://localhost:8080/#/houses', {
        params: {
          cityId: this.value,
          ...this.filters,
          start: startIndex,
          end: stopIndex
        }
      }).then(res => {
        console.log('loadMoreRows：', this.props.items)
        this.setState({
          list: [...this.props.items, ...res.data.body.list]
        })

        // 数据加载完成时，调用 resolve 即可
        resolve()
      })
    })
  }
  componentDidMount(){
    this.setState({
        list:this.props.items
    })
  }
 // 渲染房屋列表项
 renderHouseList = ({ key, index, style }) => {
    // 根据索引号来获取当前这一行的房屋数据
    const { list } = this.state
    const house = list[index]
    console.log('ddddd',house);
    // 判断 house 是否存在
    // 如果不存在，就渲染 loading 元素占位
    if (!house && house !== undefined) {
      return (
        <div key={key} style={style}>
          <p className={styles.loading} />
        </div>
      )
    }


  }
  render() {
    return (
      <div>
        <InfiniteLoader
          isRowLoaded={this.isRowLoaded}
          loadMoreRows={this.loadMoreRows}
          rowCount={100}
        >
          {({ onRowsRendered, registerChild }) => (
            <WindowScroller>
              {({ height, isScrolling, scrollTop }) => {
                return (
                  <AutoSizer>
                    {({ width }) => (
                      <List
                        autoHeight
                        height={height}
                        width={width}
                        isScrolling={isScrolling}
                        scrollTop={scrollTop}
                        rowCount={100}
                        rowHeight={140}
                        rowRenderer={this.renderHouseList}
                        onRowsRendered={onRowsRendered}
                        ref={registerChild}
                      />
                    )}
                  </AutoSizer>
                );
              }}
            </WindowScroller>
          )}
        </InfiniteLoader>
      </div>
    );
  }
}
